<template>
  <div class="container">
    <div class="module-title">
      <div class="line"></div>
      <span class="title">订单管理</span>
      <div class="line"></div>
    </div>
    <ul class="menu-list">
      <li class="menu" @click="toMenu('add-order')">
        <div class="image-wrap">
          <img style="width: 50rpx;" src="/static/images/me/order1.png">
        </div>
        录入订单
      </li>
      <li class="menu" @click="toMenu(isFinance ? 'finance-check-order' : 'check-order')">
        <div class="image-wrap">
          <img style="width: 54rpx;" src="/static/images/me/order2.png">
        </div>
        待审核订单
      </li>
      <li class="menu" @click="toMenu('delay-order')">
        <div class="image-wrap">
          <img style="width: 58rpx;" src="/static/images/me/order3.png">
        </div>
        暂不发货订单
      </li>
      <li class="menu" @click="toMenu('send-order')">
        <div class="image-wrap">
          <img style="width: 52rpx;" src="/static/images/me/order4.png">
        </div>
        待发货订单
      </li>
      <li class="menu" @click="toMenu('sign-order')">
        <div class="image-wrap">
          <img style="width: 54rpx;" src="/static/images/me/order2.png">
        </div>
        已发货订单
      </li>
      <li class="menu" @click="toMenu('order-list')">
        <div class="image-wrap">
          <img style="width: 52rpx;" src="/static/images/me/order4.png">
        </div>
        全部订单
      </li>
    </ul>
    <div class="module-title">
      <div class="line"></div>
      <span class="title">用户管理</span>
      <div class="line"></div>
    </div>
    <ul class="menu-list">
      <li class="menu" @click="toMenu('add-user')">
        <div class="image-wrap">
          <img style="width: 58rpx;" src="/static/images/me/user1.png">
        </div>
        录入用户
      </li>
      <li class="menu" @click="toMenu('user-list')">
        <div class="image-wrap">
          <img style="width: 68rpx;" src="/static/images/me/user2.png">
        </div>
        全部用户
      </li>
    </ul>
    <div class="module-title">
      <div class="line"></div>
      <span class="title">小程序</span>
      <div class="line"></div>
    </div>
    <ul class="menu-list">
      <li class="menu">
        <div class="image-wrap">
          <img style="width: 68rpx;" src="/static/images/me/video1.png">
        </div>
        在线课程
      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isFinance: false,
      };
    },
    components: {},
    methods: {
      toMenu(pageName){
        wx.navigateTo({
          url: `/pages/${pageName}/main`
        })
      }
    },
    async mounted() {
      this.isFinance = App.isFinance;
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";
  .container {
    padding-top: pxToRem(40);
  }
  .module-title {
    display: flex;
    align-items: center;
    padding-left: pxToRem(20);
    .title {
      font-size: pxToRem(36);
      margin-left: pxToRem(10);
      margin-right: pxToRem(10);
    }
    .line {
      width: pxToRem(20);
      height: pxToRem(4);
      background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
    }
  }

  .menu-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: pxToRem(40);
    padding-left: pxToRem(40);
    padding-right: pxToRem(40);
    margin-bottom: pxToRem(60);
    .menu {
      width: pxToRem(150);
      margin-bottom: pxToRem(15);
      margin-right: pxToRem(16);
      font-size: pxToRem(22);
      color: #4a4a4a;
      text-align: center;
      &:last-child {
        margin-right: 0;
      }
      .image-wrap {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: pxToRem(120);
        height: pxToRem(120);
        margin-bottom: pxToRem(20);
        background: #fff;
        box-shadow: 0 pxToRem(4) pxToRem(8) 0 rgba(168, 188, 247, 0.5);
        border-radius: pxToRem(4);
        image {
          @include middle-center();
          height: pxToRem(60);
        }
      }
    }
  }
</style>
